<div style="margin-top:25px;" v-if="status">

  <!-- 图标 -->
  <a-alert v-if="!status.connect"
    message="警告"
    description="屏幕掉线啦！！！"
    type="warning"
    showIcon
  ></a-alert>

  <div style="padding: 10px;" v-if="support">
    <a-button type="dashed" style="margin-bottom: 5px; width: 100%" @click="btnAdd(0)">
      开头添加
    </a-button>

    <div v-for="(card,index) in cards" :key="index"
        style="margin-bottom: 5px; width: 100%; border: 1px solid #e8e8e8; padding: 8px;">
      <a-input-group compact style="width: 100%; vertical-align: top; margin-right: 30px;">
        <a-select :value="card.type" @change="(v) => btnTypeChange(index,v)" style="width: 20%;">
          <a-select-option :value="t.type" :key="t.type" v-for="t in cardTemplates">
            {{t.name}}
          </a-select-option>
        </a-select>

        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnAdd(index+1)">
          <a-icon type="plus"></a-icon>
        </a-button>
        <a-button type="dashed" shape="circle" style="margin-left: 10px;" @click="btnRemove(index)">
          <a-icon type="minus"></a-icon>
        </a-button>
      </a-input-group>
    </div>

    <a-button type="dashed" style="margin-bottom: 5px; width: 100%" @click="btnAdd(cards.length)">
      结尾添加
    </a-button>

    <a-form-item key="commit" style="margin-bottom: 1px; margin-top: 30px;">
      <a-button type="primary" :disabled="!valid" @click="btnCommit()">
        提交
      </a-button>
      &emsp;
      <a-button style="margin-left: 28px;" @click="btnRefresh()">
        刷新
      </a-button>
    </a-form-item>
  </div>
  <div style="padding: 12px;" v-else>
    当前只有中国火箭发射记录 (2023 版) 支持
  </div>

  <br/>
</div>
<div v-else>
  空
</div>